<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>央视节目单 - 2025-06-26</title>
    <style>
        body { font-family: 'Microsoft YaHei', Arial, sans-serif; background: #f7f7f7; margin: 0; }
        .main-title {
            width: 100vw;
            background: none;
            color: #222;
            font-size: 2.2rem;
            font-weight: 900;
            text-align: center;
            letter-spacing: 2px;
            padding: 32px 0 18px 0;
            margin: 0 0 0 0;
            box-shadow: none;
            border-radius: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 16px;
        }
        .main-title-dot {
            display: inline-block;
            width: 18px;
            height: 18px;
            background: #e60012;
            border-radius: 4px;
            margin-right: 18px;
        }
        .container {
            max-width: 1200px;
            min-width: 900px;
            margin: 0 auto;
            background: #fff;
            box-shadow: 0 2px 8px #eee;
            border-radius: 10px;
            padding: 0 0 32px 0;
        }
        .date-bar { display: flex; border-bottom: 2px solid #eee; background: #fff; }
        .date-tab { flex: none; padding: 14px 28px 10px 28px; font-size: 1.05rem; color: #555; cursor: pointer; border: none; background: none; outline: none; transition: color 0.2s, background 0.2s; position: relative; }
        .date-tab.active { color: #fff; background: #e60012; border-radius: 8px 8px 0 0; font-weight: bold; }
        .date-tab:not(.active):hover { background: #f5f5f5; }
        .date-tab .calendar-icon { margin-left: 8px; }
        .main-content { display: flex; }
        .channel-list-vertical {
            width: 90px;
            background: #fafbfc;
            border-right: 1px solid #eee;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            padding-top: 18px;
            min-height: 600px;
        }
        .channel-vertical-item {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            cursor: pointer;
            border-radius: 10px;
            background: none;
            border: none;
            transition: background 0.2s, box-shadow 0.2s;
            width: 60px;
            height: 60px;
            margin-bottom: 0;
        }
        .channel-vertical-item.active {
            background: #e6f0fa;
            box-shadow: 0 1px 4px #e0e0e0;
        }
        .channel-vertical-item img {
            width: 48px;
            height: 48px;
            object-fit: contain;
            display: block;
        }
        .program-area { flex: 1; padding: 28px 32px; }
        .period-title { font-size: 1.05rem; color: #666; margin: 0 0 10px 0; font-weight: bold; }
        .program-table { width: 100%; border-collapse: separate; border-spacing: 0 0.5rem; }
        .program-row { background: #fff; border-radius: 8px; box-shadow: 0 1px 4px #f0f0f0; }
        .program-row td { padding: 10px 8px; font-size: 1rem; color: #222; border: none; }
        .program-row td.time { color: #888; width: 70px; font-size: 0.98rem; }
        .program-row td.title { font-weight: 500; }
        .program-row td.action { text-align: right; width: 100px; }
        .watch-btn {
            background: #bbb;
            color: #fff;
            border: none;
            border-radius: 16px;
            padding: 6px 18px;
            font-size: 0.98rem;
            cursor: not-allowed;
            transition: background 0.2s;
            opacity: 1;
        }
        .no-data { color: #888; text-align: center; padding: 32px 0; font-size: 1.05rem; }
        @media (max-width: 900px) {
            .container { min-width: 0; max-width: 100vw; }
            .main-content { flex-direction: column; }
            .channel-list-vertical { width: 100%; flex-direction: row; border-right: none; border-bottom: 1px solid #eee; min-height: 0; padding-top: 0; }
            .channel-vertical-item { width: 48px; height: 48px; }
            .program-area { padding: 12px 4px; }
        }
    </style>
</head>
<body>
<div class="main-title"><span class="main-title-dot"></span>CCTV电视节目单</div>
<div class="container">
    <div class="date-bar" id="date-bar"></div>
    <div class="main-content">
        <div class="channel-list-vertical" id="channel-list-vertical"></div>
        <div class="program-area">
            <table class="program-table">
                <tbody id="program-list"></tbody>
            </table>
            <div class="no-data" id="no-data" style="display:none;">暂无节目数据</div>
        </div>
    </div>
</div>
<script>
// 频道与文件映射及logo
const channelFiles = [
    { name: 'CCTV-1', file: 'CCTV1.json', logo: 'https://p1.img.cctvpic.com/photoAlbum/templet/common/DEPA1532314258547503/cctv-1_180817.png' },
    // { name: 'CCTV-2', file: '', logo: 'https://p1.img.cctvpic.com/photoAlbum/templet/common/DEPA1532314258547503/cctv-2_180817.png' },
    { name: 'CCTV-3', file: 'CCTV3.json', logo: 'https://p1.img.cctvpic.com/photoAlbum/templet/common/DEPA1532314258547503/cctv-3_180817.png' },
    { name: 'CCTV-4', file: 'CCTV4.json', logo: 'https://p1.img.cctvpic.com/photoAlbum/templet/common/DEPA1532314258547503/cctv-4_180817.png' },
    { name: 'CCTV-5', file: 'CCTV5.json', logo: 'https://p1.img.cctvpic.com/photoAlbum/templet/common/DEPA1532314258547503/cctv-5_180817.png' },
    { name: 'CCTV-5+ ', file: 'CCTV5+.json', logo: 'https://p1.img.cctvpic.com/photoAlbum/templet/common/DEPA1532314258547503/cctv5+_180817.png' },
    { name: 'CCTV-6', file: 'CCTV6.json', logo: 'https://p1.img.cctvpic.com/photoAlbum/templet/common/DEPA1532314258547503/cctv-6_180817.png' },
    { name: 'CCTV-8', file: 'CCTV8.json', logo: 'https://p1.img.cctvpic.com/photoAlbum/templet/common/DEPA1532314258547503/cctv-8_180817.png' },
    { name: 'CCTV-13', file: 'CCTV13.json', logo: 'https://p1.img.cctvpic.com/photoAlbum/templet/common/DEPA1532314258547503/cctv-13_180817.png' },
    { name: 'CCTV-16', file: 'CCTV16.json', logo: 'https://p1.img.cctvpic.com/photoAlbum/templet/common/DEPA1532314258547503/cctv-16_180817.png' }
];

let currentChannel = channelFiles[0];
let currentDate = '20250825';
let allDates = [];

// 渲染日期横向标签栏
function renderDateBar(dates) {
    const bar = document.getElementById('date-bar');
    bar.innerHTML = '';
    dates.forEach(date => {
        const tab = document.createElement('div');
        tab.className = 'date-tab' + (date === currentDate ? ' active' : '');
        const d = new Date(date.substr(0,4)+'-'+date.substr(4,2)+'-'+date.substr(6,2));
        const week = ['星期一','星期二','星期三','星期四','星期五','星期六','星期日'][d.getDay()===0?6:d.getDay()-1];
        tab.innerHTML = `<div>${week}<br>${date.substr(0,4)}-${date.substr(4,2)}-${date.substr(6,2)}</div>`;
        tab.onclick = function() {
            currentDate = date;
            loadData();
            renderDateBar(allDates);
        };
        bar.appendChild(tab);
    });
    // 往日节目单按钮
    // const more = document.createElement('div');
    // more.className = 'date-tab';
    // more.innerHTML = '<span class="calendar-icon">📅</span>查询往日节目单';
    // bar.appendChild(more);
}

// 渲染频道logo纵向列表
function renderChannelList() {
    const list = document.getElementById('channel-list-vertical');
    list.innerHTML = '';
    channelFiles.forEach(ch => {
        const div = document.createElement('div');
        div.className = 'channel-vertical-item' + (ch.file === currentChannel.file ? ' active' : '');
        div.innerHTML = `<img src="${ch.logo}" alt="${ch.name}">`;
        div.onclick = () => {
            currentChannel = ch;
            renderChannelList();
            loadData();
        };
        list.appendChild(div);
    });
}

// 渲染节目单
function renderProgramList(programs) {
    const tbody = document.getElementById('program-list');
    tbody.innerHTML = '';
    if (!programs || !programs.length) {
        document.getElementById('no-data').style.display = 'block';
        return;
    }
    document.getElementById('no-data').style.display = 'none';
    // 按时间分组
    const am = [], pm = [];
    programs.forEach(item => {
        // showTime格式为"HH:mm"
        const hour = parseInt(item.showTime.split(':')[0], 10);
        if (hour < 12) am.push(item);
        else pm.push(item);
    });
    // 上午
    if (am.length) {
        const tr = document.createElement('tr');
        tr.innerHTML = '<td colspan="4" style="background:#f5f5f5;font-weight:bold;font-size:1.08rem;color:#555;padding:10px 0 10px 16px;">上午（00:00 - 12:00）</td>';
        tbody.appendChild(tr);
        am.forEach(item => {
            const tr = document.createElement('tr');
            tr.className = 'program-row';
            tr.innerHTML = `<td class="time">${item.showTime}</td><td class="title">${item.t}</td><td></td><td class="action"><button class="watch-btn" disabled>未开始</button></td>`;
            tbody.appendChild(tr);
        });
    }
    // 下午
    if (pm.length) {
        const tr = document.createElement('tr');
        tr.innerHTML = '<td colspan="4" style="background:#f5f5f5;font-weight:bold;font-size:1.08rem;color:#555;padding:10px 0 10px 16px;">下午（12:00 - 24:00）</td>';
        tbody.appendChild(tr);
        pm.forEach(item => {
            const tr = document.createElement('tr');
            tr.className = 'program-row';
            tr.innerHTML = `<td class="time">${item.showTime}</td><td class="title">${item.t}</td><td></td><td class="action"><button class="watch-btn" disabled>未开始</button></td>`;
            tbody.appendChild(tr);
        });
    }
}

// 加载并渲染数据
function loadData() {
    fetch('data/' + currentChannel.file)
        .then(res => res.json())
        .then(json => {
            console.log(json);
            if (!allDates.length) {
                allDates = json.map(d => d.date);
                renderDateBar(allDates);
            }
            const day = json.find(d => d.date === currentDate);
            renderProgramList(day && day.program ? day.program : []);
        });
}

renderDateBar([currentDate]); // 初始空白
renderChannelList();
loadData();
</script>
</body>
</html>
